import { Component } from 'react'

/**
父传子
  注意★：
  1、函数组件 接收父传过来的数据 用形参props接收（第一个形参，名字可变），接收的是一个对象
  2、类组件  接收父传过来的数据 是一个实例   用this.props.属性名
       
子传父
  注意★：
  
 */
function Son2(props) {
  console.log('函数子组件接受父的数据：', props)
  console.log(typeof props.a)
  return (
    <div>
      <h2>函数子组件</h2>
      <ul>
        <li>{props.count}</li>
        <li>{props.tpl}</li>
        <li></li>
      </ul>
    </div>
  )
}

class Child extends Component {
  render() {
    console.log('类子组件接收：', this.props)
    return (
      <div>
        <h2>我是子组件</h2>
        <hr />
        <ul>
          <li>{this.props.money}</li>
          <li></li>
          <li></li>
        </ul>
      </div>
    )
  }
}
// 父组件
/**
 * props 是只读对象**，也就是说：只能读取对象中的属性，无法修改
  1. == 单向数据流 ==，也叫做：自顶而下（自上而下）的数据流
  2. 可以传递任意数据（数字  字符串  布尔类型 数组 对象 函数 jsx）
 */
class App extends Component {
  state = {
    money: 1000,
    count: 0,
    obj: {
      name: '小红',
    },
    tpl: <h2>我是h2</h2>,
  }
  render() {
    return (
      <div>
        <h1>我是父组</h1>
        {/* 将数据传递给子组件 */}
        <Son2
          a="1"
          b={2}
          c={'c'}
          tpl={this.state.tpl}
          obj={this.state.obj}
          count={this.state.count}
        />
        <Child money={this.state.money} />
      </div>
    )
  }
}

export default App
